<template>
	<div class="box">
		<div id="screenshot">
			<text class="title">未来慢性病发病风险汇总报告</text>
			<table class="morbidityRisk">
				<tr>
					<th>极高风险</th>
					<th>高风险</th>
					<th>中风险</th>
					<th>低风险</th>
				</tr>
				<tr v-for="(item,index) in arrlength" :key="index">
					<td>{{item.extremelyHighRisks}}</td>
					<td>{{item.highRisks}}</td>
					<td>{{item.mediumRisks}}</td>
					<td>{{item.lowRisks}}</td>
				</tr>
			</table>
		</div>
		
		<div id="screenshot2">
			<text class="title">未来慢性病发病危险度评估汇总报告</text>
			<table class="risk">
				<tr>
					<th>未来疾病发病</th>
					<th>绝对危险度</th>
					<th>
						<view>相对平均危险度（倍）</view>
						<view>
							<text>目前风险</text>
							<text>理想风险</text>
						</view>
					</th>
				</tr>
				<tr v-for="(item,index) in info.hazardAssessTipTable && info.hazardAssessTipTable.diseases">
					<td>{{item.diseaseName}}</td>
					<td>{{item.riskDegree}}</td>
					<td>{{item.currentRisks}}</td>
					<td>{{item.idealRisk}}</td>
				</tr>
			</table>
		</div>

		<!-- <image :src="base64"></image> -->
	</div>
</template>

<script>
	import html2canvas from 'html2canvas';
	export default {
		props:{
			info:{
				type: Object,
				default:function(){
					return {}
				}
			}
		},
		name:'reportImgType2',
		watch:{
			info(v){
				var arr = [v.dangeMorbidityAssessSummaryTable.extremelyHighRisks.length,v.dangeMorbidityAssessSummaryTable.highRisks.length,v.dangeMorbidityAssessSummaryTable.lowRisks.length,v.dangeMorbidityAssessSummaryTable.mediumRisks.length]
				const maxlength = arr.sort()[arr.length-1]
				for(var a = 0;a<maxlength;a++){
					this.arrlength.push({
						extremelyHighRisks:v.dangeMorbidityAssessSummaryTable.extremelyHighRisks[a],
						highRisks:v.dangeMorbidityAssessSummaryTable.highRisks[a],
						lowRisks:v.dangeMorbidityAssessSummaryTable.lowRisks[a],
						mediumRisks:v.dangeMorbidityAssessSummaryTable.mediumRisks[a]
					})
				}
			}
		},
		data() {
			return {
				base64: '',
				consult:['<6','250-400','300','40-50','25-35','200-350','300-500','40-75','25-30','40-75','1500-1700','150','≥6','40','0','无','男≦25,女≦15','6-8','无','经常'],
				arrlength:[]
			}
		},
		methods:{
			toImg(dom) {
				var dom = document.querySelector('#screenshot') // 获取dom元素
				return new Promise((resolve,reject)=>{
					html2canvas(dom, {
						width: dom.clientWidth, //dom 原始宽度
						height: dom.clientHeight,
						scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
						scrollX: 0,
						useCORS: true, //支持跨域，但好像没什么用
					}).then((canvas) => {
						this.base64 = canvas.toDataURL('image/png')
						resolve(canvas.toDataURL('image/png'))
					});
				})
			},
			toImg2(dom) {
				var dom = document.querySelector('#screenshot2') // 获取dom元素
				return new Promise((resolve,reject)=>{
					html2canvas(dom, {
						width: dom.clientWidth, //dom 原始宽度
						height: dom.clientHeight,
						scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
						scrollX: 0,
						useCORS: true, //支持跨域，但好像没什么用
					}).then((canvas) => {
						this.base64 = canvas.toDataURL('image/png')
						resolve(canvas.toDataURL('image/png'))
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		position: fixed;
		width: 1032px !important;
		height: 1566px !important;
		margin: 0 83px;
		left: 0;
		top: 30px;
		top: -10000px;
		.title {
			color: #00B25C;
			font-size: 48px;
			font-weight: bold;
			margin-top: 54px;
		}
		#screenshot2,#screenshot{
			padding-bottom: 20px;
		}
		.morbidityRisk{			
			margin: 30px 0;
			width: 866px;
			border-collapse:collapse;
			tr {
				display: flex;
				font-weight: normal;
				text-align: center;	
				width: 100%;
				border-bottom:1px solid #00C481;
				border-left: 1px solid #00C481;
				th{
					flex: 1;
					background-color: #00C481;
					height: 65px;
					line-height: 65px;
					color: #FFFFFF;
					margin-right: 1px;
					border-radius:8px 8px 0 0;
					font-size: 23px;
					font-weight: 500;
					box-sizing: border-box;
				}
				th:last-child {
					margin: 0;
				}
				td {
					border-right: 1px solid #00C481;
					color: #00C481;
					font-size: 22px;
					height: 70px;
					line-height: 70px;
					width: 217px;
					box-sizing: border-box;
				}
			}
			tr:first-child {
				border-left: 0;
			}
			tr:nth-child(even) td {
				background-color: #F6FFFB;
			}
			
			tr:nth-child(odd) td {
				background-color: #E2FBEF;
			}
	
			.first {
				min-width: 154px;			
			}
			.second {
				min-width: 138px;
			}
			p:last-child {
				margin-right: 0;
			}
		}
		
		.risk {
			margin: 30px 0;
			width: 866px;
			border-collapse:collapse;
			tr {
				display: flex;
				font-weight: normal;
				text-align: center;	
				width: 100%;
				border-left: 1px solid #00C481;
				th {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 247px;
					height: 92px;				
					color: #FFFFFF;
					font-size: 23px;
					background-color: #00C481;
					color: #FFFFFF;
					margin-right: 1px;
					border-radius:8px 8px 0 0;
					font-size: 23px;
					font-weight: 500;
					box-sizing: border-box;
				}
				th:nth-child(2) {
					width: 181px;
				}
				th:nth-child(3) {
					width: 437px;
					display: block;
					text-align: left;
					view:nth-child(1) {
						height: 46px;
						border-bottom: 1px solid #FFFFFF;
						line-height: 46px;
						padding-left: 24px;
					}
					view:nth-child(2) {
						display: flex;
						padding-left: 24px;
						line-height: 46px;
						text{
							flex: 1;
						}
						text:nth-child(2) {
							padding-left: 50px;
						}
					}
				}
				th:last-child {
					margin: 0;
				}
				td {
					border-right: 1px solid #00C481;
					border-bottom: 1px solid #00C481;
					color: #00C481;
					font-size: 22px;
					height: 70px;
					line-height: 70px;
					width: 248px;
					box-sizing: border-box;
				}
				td:nth-child(2) {
					width: 182px;
				}
				td:nth-child(3) {
					width: 217px;
					padding-left: 24px;
					text-align: left;
				}
				td:nth-child(4) {
					width: 220px;
				}
				tr:first-child {
					border-left: 0;
				}
				
				tr:nth-child(even) {
					background-color: pink;
				}
				
				tr:nth-child(odd) td{
					background-color: #E2FBEF;
				}
			}
		}
		
		.apply {
			margin: 60px auto;
			background-color: #00C481;
			color: #FFFFFF;
			font-size: 17px;
			width: 140px;
			height: 40px;
			line-height: 40px;
			border-radius: 20px;
			text-align: center;
		}
		th.jingbu{
			box-shadow: 0px -25px 0 0 #F9C036;
			background: #F9C036 !important;
		}
		td.jingbu{
			box-shadow: 0px 25px 0 0 #FFF9E9;
			background: #FFF9E9 !important;
			color: #F7BB2B !important; 
		}
		th.chiping{
			box-shadow: 0px -25px 0 0 #42A8FF;
			background: #42A8FF !important;
		}
		td.chiping{
			box-shadow: 0px 25px 0 0 #EBF6FF;
			background: #EBF6FF !important;
			color: #42A8FF !important; 
		}
		th.tuibu{
			box-shadow: 0px -25px 0 0 #FF5151;
			background: #FF5151 !important;
		}
		td.tuibu{
			box-shadow: 0px 25px 0 0 #FFF3F3;
			background: #FFF3F3 !important;
			color: #FF5151 !important; 
		}
		.decode{
			h2{
				font-size: 26px;
				color: #00C481;
				margin-bottom: 20px;
			}
			font-size: 24px;
			color: #00C481;
		}
	}
</style>
